<template>
  <view class="task-info">
    <view class="content">
      <view class="title">{{ taskDetail.title }}</view>
      <rich-text :nodes="contents" />
    </view>
    <button
      :disabled="taskDetail.isRecord"
      class="bottom-btn"
      @tap="addDailyTask"
    >
      添加任务
    </button>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import { addDailyTaskList } from "../../../services/task-service";

export default {
  data() {
    return {
      taskDetail: {}
    };
  },
  computed: {
    contents() {
      const contents = this.taskDetail.content.split("<br/>");
      return contents.map(content => {
        return {
          name: "div",
          attrs: {
            class: "task-detail-content"
          },
          children: [
            {
              type: "text",
              text: content
            }
          ]
        };
      });
    }
  },
  methods: {
    async addDailyTask() {
      const res = await addDailyTaskList(this.taskDetail.id);
      if (res.data.code === "success") {
        this.$store.commit("setCreatedDailySuccessTask", this.taskDetail);
        Taro.navigateBack();
      }
    }
  },
  created() {
    const { task } = this.$store.state;
    this.taskDetail = task.viewTaskDetail;
  }
};
</script>
